<template>
    <div class="tValueChart"></div>
</template>

<style lang="less" scoped>
.tValueChart {
    height: 400px;
    width: 100%;
    text-align: center;
}
</style>

<script>
import { Right } from '@element-plus/icons-vue';

export default {
    name: 'tValueChart',
    props: {
        data: Object
    },
    data() {
        return {
            tValueChart: null
        }
    },
    methods: {
        setChart() {
            let option = {
                title: {
                    text: 'T2诊断',
                    top: '20px',
                    left: 'center'
                },
                animation: false, //控制不要动画
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    right: "50px",
                    top: '40px',
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.data.predicts.insertTime,
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                    formatter: '{value} '
                    }
                },
                series: [
                    {
                    name: '诊断值',
                    type: 'line',
                    data: this.data.predicts.TValue,
                    
                    markLine: {
                        data: [{
                        name: '标准值',
                        yAxis:this.data.standard.standardT2,
                        label:{
                            formatter: '标准值：'+this.data.standard.standardT2,
                        },
                        lineStyle: {
                            color: 'red', // 虚线的颜色
                            width: 1, // 虚线的宽度
                            type: 'dashed', // 虚线类型
                        }
                        }],
                        symbol: 'none',
                        animation : false,
                    }
                    },
                ]
            };
            if (!this.tValueChart)
                this.tValueChart = this.$echarts(this.$el);
            this.tValueChart.clear();
            this.tValueChart.resize()
            this.tValueChart.setOption(option);
        },
    },
    mounted() {
        this.setChart();
        this.intervalId = setInterval(() => {
            this.tValueChart.setOption({
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.data.predicts.insertTime,
                },
                series: [
                    {
                    name: '诊断值',
                    type: 'line',
                    data: this.data.predicts.TValue,
                    
                    markLine: {
                        data: [{
                        name: '标准值',
                        yAxis:this.data.standard.standardT2,
                        label:{
                            formatter: '标准值：'+this.data.standard.standardT2,
                        },
                        lineStyle: {
                            color: 'red', // 虚线的颜色
                            width: 1, // 虚线的宽度
                            type: 'dashed', // 虚线类型
                        }
                        }],
                        symbol: 'none',
                        animation : false,
                    }
                    },
                ]
            });
        }, 2000);
    }
}
</script>
